/*
 * @Author: 六弦(melodyWxy)
 * @Date: 2022-03-01 14:34:01
 * @LastEditors: 六弦(melodyWxy)
 * @LastEditTime: 2022-03-01 15:40:29
 * @FilePath: /menorepo-demo/Users/wxy/codeWorks/up/d_form/antd-demo-ts/src/pages/AddForm/Step1/index.tsx
 * @Description: update here
 */

import { Button, Input, Select } from "antd";


import { Children, useState, FC } from 'react';


import { ChildOptions, FormItemSets } from './../../../components/XForm/type';
import type { Step0Props } from './../type';


function randomString() {
    const len = 6;
    var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';    /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
    var maxPos = $chars.length;
    var pwd = '';
    for (let i = 0; i < len; i++) {
    pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
    }
    return pwd;
}

const Step1: FC<Step0Props> = ({ stepNext})=> {
    const [children, setChildren] = useState<Record<string, any>[]>([]);
    const handleItemValueChange = (key: string, v: any, target: any ) => {
        if(key === 'label'){
            target.props.label = v;
        }
        if(key === 'type'){
            target.child.type = v;
        }
        setChildren([...children]);
    }


    const handleAddItem = () => {
        children.push({
            type: FormItemSets.Item,
            props: {},
            name: randomString(),
            child: {
                type: '',
                props: {
                    label: ''
                }
            }
        })
        setChildren([...children]);
    }

    const handleNext = ()=> {
        stepNext({
            children
        })
    }

    const list = children.map(item => {
        const {value} = item;
        return (
            <div>
                <div>标签</div>
                <Input value={value}  onChange={(e)=>handleItemValueChange('label', e.target.value, item)}/>

                <div>类型</div>
                <Select value={value}  options={ChildOptions}  onChange={(v)=>handleItemValueChange('type', v, item)}/>
            </div>
        )
    })
    return (
        <div>
            {list}
            <Button type="primary" onClick={handleAddItem}>新增一条 + </Button>

            <Button type="primary" onClick={handleNext}> 下一步 </Button>
        </div>
    )
}


export default Step1